<template>
  <div class="uk-section">
    <div class="uk-container uk-container-large">
      <img src="~assets/service/s1.png" />
      <h2><b>OUR SERVICE</b></h2>
      <img src="~assets/service/s2.png" />
      <h3 style="margin-bottom: 0px; text-align: center">新视觉创意</h3>
      <h5 style="margin-top: 0px; text-align: center">
        Visual creative planning
      </h5>
      <p style="margin-top: 0px; text-align: center">
        电商页面设计/外包装平面设计/创意主题海报<br />
        极刻联合 AC
        尼尔森市场研究机构，根据商家及品牌需求，策划在同品类中具有竞争力、独特差异化的创意视觉
        赋能品牌传播价值，精准触达有效沟通。用创意激活内容，用设计催化转化。
      </p>
      <p class="more">
        <nuxt-link to="/VisualCreativePlanning">
          <div>了解更多</div>
          <!-- <img src="~assets/service/b1.png" /> -->
        </nuxt-link>
      </p>
      <!--   -->
      <div class="uk-section index_pictures">
        <div
          class="uk-container uk-container-expand"
          style="display: flex; justify-content: space-between; flex-wrap: wrap"
        >
          <div
            style="padding: 10px; flex: 48%; margin-bottom: 80px"
            class="index_imgitem fadeInUp wow animate__fadeInUp"
          >
            <img
              style="border-radius: 10px"
              src="~assets/service/left_img.png"
            />
            <h4 style="margin-top: 40px; margin-bottom: 10px; line-height: 1">
              <b>品牌视觉VI规范</b>
            </h4>
            <h5 style="margin-top: 15px; margin-bottom: 10px; line-height: 1">
              Visual specification and application
            </h5>
            <h5 style="text-align: center; padding: 0 30px">
              细化品牌调性 / 设计方案 /主辅色调运用 / 标准字体运用 /
              辅助元素设计及应用
            </h5>
            <p class="more">
              <nuxt-link to="/vi">
                <div>了解更多</div>
                <!-- <img src="~assets/service/b1.png" /> -->
              </nuxt-link>
            </p>
          </div>
          <div
            style="padding: 10px; flex: 48%; margin-bottom: 80px"
            class="index_imgitem fadeInUp wow animate__fadeInUp"
          >
            <img
              style="border-radius: 10px"
              src="~assets/service/right_img.png"
            />
            <h4 style="margin-top: 40px; margin-bottom: 10px; line-height: 1">
              <b>摄影及摄像</b>
            </h4>
            <h5 style="margin-top: 15px; margin-bottom: 10px; line-height: 1">
              Photography and Video
            </h5>
            <h5 style="text-align: center; padding: 0 30px">
              爆款商品宣传片/商品推广短视频/企业宣传片/商品白底图/复杂商品视觉宣传图
            </h5>
            <p class="more">
              <nuxt-link to="/video">
                <div>了解更多</div>
                <!-- <img src="~assets/service/b1.png" /> -->
              </nuxt-link>
            </p>
          </div>
        </div>
      </div>
      <!--  -->
    </div>
    <Bottom />
  </div>
</template>

<script>
import Bottom from "@/components/Bottom";
export default {
  name: "Service",
  components: {
    Bottom,
  },
};
</script>

<style scoped>
.more {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 80px;
  font-size: 16px;
}
.more div {
  margin: 0 auto;
  text-align: center;
  width: 150px;
  height: 60px;
  border: 1px solid #dbdbdb;
  border-radius: 100px;
  line-height: 60px;
  transition: all 0.5s;
  -moz-transition: all 0.5s; /* Firefox 4 */
  -webkit-transition: all 0.5s; /* Safari and Chrome */
  -o-transition: all 0.5s; /* Opera */
}
.more div:hover {
  margin: 0 auto;
  text-align: center;
  width: 150px;
  height: 60px;
  border: 1px solid #dbdbdb;
  background-color: black;
  border-radius: 100px;
  line-height: 60px;
  color: white;
}
.more a {
  color: rgba(153, 153, 153, 1);
}
.index_pictures {
  padding: 0px;
  margin: 20px 0;
}
.index_imgitem {
  padding: 5px;
  flex: 50%;
  text-align: center;
  min-height: 200px;
  font-size: 30px;
}
@media only screen and (max-width: 768px) {
  .index_pictures {
    padding: 0px;
    margin: 20px;
  }
  /* For mobile phones: */
  .index_title {
    justify-content: center;
  }
  .index_subtitle {
    justify-content: center;
  }
  .bottom_content {
    flex: 100%;
    text-align: center;
    margin-top: 50px;
    color: rgb(146, 146, 146);
  }
  .index_imgitem {
    font-size: 18px;
  }
}
</style>
